<template>
  <view class="">
    <view class="header">
      <u-navbar auto-back title="我的钱包" title-style="color:#fff" left-icon-color="#fff" bgColor="background:rgba(0,0,0,0)"></u-navbar>
    </view>
    <view class="main">
      <view class="topBox">
        <view class="t">可提现余额</view>
        <view class="num">168.00</view>
      </view>
    </view>
    <view style="padding-bottom: 125rpx">
      <templat v-if="useList.length > 0">
        <UseList :useList="useList" />
      </templat>
      <view v-else style="width: 100%; display: flex; justify-content: center">
        <u-empty mode="list"></u-empty>
      </view>
    </view>

    <view class="buttomBox">
      <u-button type="primary" shape="circle" @click="goPage('/pages/myPage/withdrawal')">提现</u-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import UseList from "./component/UseList.vue";
import { goPage } from "../../utils/commonFn";
const useList = ref([]);
</script>

<style lang="less" scoped>
.header {
  height: 322rpx;
}
.main {
  margin-top: -190rpx;
  .topBox {
    background: #ffffff;
    border-radius: 16rpx;
    padding: 32rpx;
    .t {
      font-size: 26rpx;
      font-family: PingFangSC, PingFang SC;
      color: #333333;
      line-height: 36rpx;
    }
    .num {
      font-size: 64rpx;
      font-family: DINPro, DINPro;
      font-weight: bold;
      color: #333333;
      line-height: 82rpx;
      margin: 30rpx 0;
    }
  }
}
.buttomBox {
  box-sizing: border-box;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #fff;
  padding: 20rpx;
}
</style>
